<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>练习：用户管理</title>
		<script type="text/javascript" src="../js/framework/vue.js"></script>
		<script type="text/javascript" src="../js/framework/jquery-3.2.1.min.js" ></script>
		<script type="text/javascript" src="../css/bootstrap/bootstrap.min.js" ></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css" />
		<script>
			window.onload = function () {
				let vm = new Vue({
					el: '.container',
					data: {  //存储数据
						users: [
							{name:'vector',age:23,email:'123@qq.com'},
							{name:'summer',age:18,email:'456@qq.com'}
						],
						user: {},
						nowIndex: -1,  //当前要删除项的索引
						cSelect: new Set(),
						flag: new Object()
					},
					methods: {  //存储方法
						addUser () {
							this.users.push(this.user);
							this.user = {};
						},
						deleteUser () {
							if (this.nowIndex === -1) {
								this.users = [];  //删除所有
							} else {
								this.users.splice(this.nowIndex,1)  //从指定位置开始删除,删除1个。
							}
						},
						getSelect () {
							console.log(this.cSelect);
						},
						print (index){
							var cbSelect = document.getElementsByName("cb");
							if (cbSelect[index].checked) {
								this.cSelect.add(index);
							} else {
								if (this.cSelect.has(index)) {
									this.cSelect.delete(index);
								}
							}
						},
						deleteSomeUser () {
							var o = new Object(null);
							
							for (let item of this.cSelect) {
								this.users.splice(item,1,o);
								if (this.users[item] === o){
									this.users.splice(item,1);
								}
							}
							
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div class="container">
			<h2 class="text-center">添加用户</h2>
			<form class="form-horizontal">
				<div id="" class="form-group">
					<label form="name" class="control-label col-sm-2 col-sm-offset-2">姓名:</label>
					<div id="" class="col-sm-6">
						<input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名"/>
					</div>
				</div>
				<div id="" class="form-group">
					<label form="name" class="control-label col-sm-2 col-sm-offset-2">年龄:</label>
					<div id="" class="col-sm-6">
						<input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄"/>
					</div>
				</div>
				<div id="" class="form-group">
					<label form="name" class="control-label col-sm-2 col-sm-offset-2">邮箱:</label>
					<div id="" class="col-sm-6">
						<input type="text" class="form-control" id="email" v-model="user.email" placeholder="请输入邮箱"/>
					</div>
				</div>
				<div class="form-group text-center">
					<input type="button" value="添加" class="btn btn-primary" v-on:click="addUser"/>
					<input type="reset" value="重置" class="btn btn-primary" />
				</div>
			</form>
			
			<hr>
			
			<table class="table table-bordered table-hover">
				<caption class="h3 text-center text-info">用户列表</caption>
				<thead>
					<tr>
						<th class="text-center">序号</th>
						<th class="text-center">姓名</th>
						<th class="text-center">年龄</th>
						<th class="text-center">邮箱</th>
						<th class="text-center">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(user,index) in users" class="text-center">
						<td>{{index+1}}</td>
						<td>{{user.name}}</td>
						<td>{{user.age}}</td>
						<td>{{user.email}}</td>
						<td>
							<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</button>
							<input type="checkbox" name="cb" v-on:click="print(index)"/> 
						</td>
					</tr>
					<tr>
						<td colspan="5" class="text-center">
							<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">
								删除所有
							</button>
							<button class="btn btn-danger btn-sm" v-on:click="deleteSomeUser">
								删除选中的用户
							</button>
							<button class="btn btn-danger btn-sm" v-on:click="getSelect">
								输出选择的用户
							</button>
						</td>
					</tr>
				</tbody>
			</table>
			
			<!--模态框-->
			<div id="del" class="modal fade">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
								<span>&times;</span>
							</button>
							<h5 class="modal-title">
								{{nowIndex===-1?'确定删除所有用户吗?':'确定删除用户'+(users[nowIndex]?users[nowIndex].name:'')+'吗?' }}
							</h5>
						</div>
						<div class="modal-body text-center">
							<button class="btn btn-primary" data-dismiss="modal" v-on:click="deleteUser">
								确定
							</button>
							<button class="btn btn-primary" data-dismiss="modal">
								取消
							</button>
						</div>
					</div>
				</div>
			</div>
			
		</div>
	</body>
</html>
